﻿@*@model Models.CMS_User*@
@{
    ViewBag.Title = "Index";
    //Layout = null;
    Layout = "~/Areas/HouTaiArea/Views/Shared/_Layout.cshtml";
}

@*<h2>Index</h2>
    @section head{
        这会是主页
    }*@

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div style="width:50%;margin:0 auto">
        <div class="card">
            <h5 class="card-header">条件查询</h5>
            <div class="form-inline card-body">
                <div class="form-group">
                    <label for="name">编号</label>
                    &nbsp; &nbsp;<input type="text" class="form-control" id="aid" placeholder="编号">
                </div>
                <div class="form-group">
                    <button id="sel" class="btn btn-primary">查询</button>
                </div>
            </div>
        </div>
        <button id="add" type="button" class="btn btn-primary" href="~/Areas/HouTaiArea/Views/Index/add.cshtml" @*data-bs-toggle="modal" data-bs-target="#staticBackdrop"*@>
            添加
        </button>
        <table class="table table-bordered table-hover text-center" id="tab">
            <thead class="thead-dark">
                <tr>
                    <th>编号</th>
                    <th>所属栏目</th>
                    <th>文章标题</th>
                    <th>作者</th>
                    <th>发布人</th>
                    <th>创建时间</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th>点击率</th>
                    <th>评论数</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <div id="example" aria-label="Page navigation">
            <ul id="pageLimit" class="pagination"></ul>
        </div>

        <!-- Modal -->
        @*<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button id="add" type="button" class="btn btn-primary">添加</button>
                        </div>
                    </div>
                </div>
            </div>*@
    </div>
    <script src="~/Scripts/jquery-3.6.0.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap-paginator.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: "@Url.Action("SelectPage")",
                datatype: 'json',
                type: "get",
                contentType: "application/json",
                data: { pageindex: 1, pagesize: 5 },
                error: function (r) { alert("查询失败") },
                success: function (data) {
                    dataShow(data);

                    $('#example').bootstrapPaginator(Getoptions(JSON.parse(data)));
                    //BootstrapPaginator($('#example'),Getoptions(JSON.parse(data)));
                }
            });
            //var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop'));
            //console.log(myModal);
            $("#sel").click(function () {
                $.post("@Url.Action("SelectPage")",
                    {
                        pageindex: 1,
                        pagesize: 5,
                        "aid": $("#aid").val(),
                    }, function (data) {
                        dataShow(data);
                        $('#example').bootstrapPaginator(Getoptions(JSON.parse(data)));
                    });
            });
            $("#add").click(function () {
                //可以不用定义全局
                //var myModalEl = document.getElementById('staticBackdrop')
                //var modal = bootstrap.Modal.getInstance(myModalEl)
                //console.log(modal);
                //modal.hide();
                //myModal.hide()
                //console.log(myModal);
                //myModal.toggle();
                window.location.href = "add";

            });
            //删除
            $("#tab").on("click", ".del", function () {
                if (!confirm("你确定要删除吗？")) {
                    return false;
                }
                var id = $(this).data("id");
                $.ajax({
                    type: "post",
                    url: "@Url.Action("DelectArticle")",
                    data: JSON.stringify({
                        "id": id
                    }),
                    contentType: "application/json",
                    dataType: "json",
                    error: function (e) { alert("查询错误"); },
                    success: function (d) {
                        if (d) {
                            alert("删除成功");
                            dataShow();
                            window.location.href = "Index";
                        } else {
                            alert("删除失败");
                        }
                    }
                });
            });
        });
        //表格显示数据
        function dataShow(r) {
            $(".table tr:gt(0)").remove();
            if (r != null) {
                $.each(JSON.parse(r).list, function (index, item) { //遍历返回的json
                    var tr = $("<tr>").appendTo(".table");
                    $("<td>").appendTo(tr).text(item.aid);
                    $("<td>").appendTo(tr).text(item.ctitle);
                    $("<td>").appendTo(tr).text(item.title);
                    $("<td>").appendTo(tr).text(item.author);
                    $("<td>").appendTo(tr).text(item.Uname);
                    $("<td>").appendTo(tr).text(item.ctime);
                    $("<td>").appendTo(tr).text(item.ptime);
                    if (item.state == 1) {
                        $("<td>").appendTo(tr).text("草稿");
                    } else if (item.state == 2) {
                        $("<td>").appendTo(tr).text("发布");
                    }
                    $("<td>").appendTo(tr).text(item.hits);
                    $("<td>").appendTo(tr).text(item.comments);
                    $("<td>").appendTo(tr).text(item.ahtml);
                    $("<td>").appendTo(tr).html("<a href='javascript:void(0)' \
                           data-id=" + item.aid + " class='del'>删除</a> ");
                });
            }
        }
        //显示分页插件的数据
        function Getoptions(r) {
            return {
                currentPage: r.currentPage, //当前页数
                totalPages: r.pageSum, //总页数
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },//点击事件，用于通过Ajax来刷新整个list列表
                onPageClicked: function (event, originalEvent, type, page) {
                    $.post("@Url.Action("SelectPage")",
                        {
                            pageindex: page,
                            pagesize: 5,
                            "aid": $("#aid").val(),
                            //"sex": $("input[name='sex']:checked").val()
                        }, function (r) {
                        dataShow(r);
                    });
                }
            }
        }
    </script>
</body>
</html>

